<template>
  <div class="container">
    <div class="header">
      <div class="title">水上桥区管控</div>
      <div class="menu">
        <div class="item active">总体概况</div>
        <div class="item" @click="router.push({ path: '/bridgeManage' })">桥区日常管理</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div class="count">
          <div class="left-part">
            <div class="item" style="background-color: rgb(252, 252, 252);border-radius: 10px;
               border: 2px solid rgba(128, 128, 128, 0.08);height: 103px;margin-bottom: 12px;margin-top: 6px;width: 244px;">
              <div class="top">
                <!-- <img src="../../assets/images/pc/hdlcs-icon.png" alt=""> -->
                <div class="name">航道里程数(公里)</div>
                <div class="value">{{ bgAndWyData.hdMile || "--" }}</div>
              </div>
              <div class="bottom">
                <div class="bottom-item">
                  <div class="name">高等级</div>
                  <div class="value">{{ bgAndWyData.hdHighLevel || "--" }}</div>
                </div>
                <div class="bottom-item">
                  <div class="name">等级</div>
                  <div class="value">{{ bgAndWyData.hdOtherLevel || "--" }}</div>
                </div>
              </div>
            </div>
            <div class="item" style="background-color: #fcfcfc;border-radius: 10px;
            border: 2px solid #80808014;height: 103px;">
              <div class="top">
                <!-- <img src="../../assets/images/pc/sycbll-icon.png" alt=""> -->
                <div class="name1">上月船舶流量(艘)</div>
              </div>
              <div class="bottom">
                <div class="bottom-item">
                  <div class="name">高等级</div>
                  <div class="value">{{ getCbllData.high || "--" }}</div>
                </div>
                <div class="bottom-item">
                  <div class="name">等级</div>
                  <div class="value">{{ getCbllData.other || "--" }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-part">
            <div class="top">
              <!-- <img src="../../assets/images/pc/qlzs-icon.png" alt=""> -->
              <div class="name">桥梁总数(座)</div>
              <div class="value">{{ bgAndWyData.totalBridge || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">高等级航道</div>
              <div class="value">{{ bgAndWyData.bgHighLevel || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">等级航道</div>
              <div class="value">{{ bgAndWyData.bgOtherLevel || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">高等级航道<span style="color: #595959;">(净空达标)</span></div>
              <div class="value1" style="color: #262626;">{{ bgAndWyData.bgDabiaoHighLevel || "--" }}</div>
            </div>
            <div class="bottom">
              <div class="name">高等级航道<span style="color: #595959;">(净空不达标)</span></div>
              <div class="value1" style="color: #262626;">{{ bgAndWyData.bgNoDabiaoHighLevel || "--" }}</div>
            </div>
          </div>
        </div>
        <!-- <div class="title">
          <div class="name">筛选</div>
        </div>
        <div class="filter">
          <div class="filter-item">
            <div class="name">内河高等级航道</div>
            <el-checkbox-group
              v-model="checkedValues1"  
              @change="handleChange()"
            >
              <el-checkbox
                v-for="item in options1"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>          
          <div class="filter-item">
            <div class="name">内河4-7等级航道</div>
            <el-checkbox-group
              v-model="checkedValues2"
              @change="handleChange()"                                 
            >
              <el-checkbox
                v-for="item in options2"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">内河等外航道</div>
            <el-checkbox
              v-model="nhdwhd"  
              @change="handleChange()"
              border         
            >
              内河等外航道
            </el-checkbox>
          </div>
          <div class="filter-item">
            <div class="name">通航净高达标情况</div>
            <el-checkbox-group
              v-model="checkedValues3"      
              @change="handleChange()"                           
            >
              <el-checkbox
                v-for="item in options3"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="filter-item">
            <div class="name">事故桥梁</div>
            <el-checkbox-group
              v-model="checkedValues4"   
              @change="handleChange()"                              
            >
              <el-checkbox
                v-for="item in options4"
                :key="item"
                :label="item"
                :value="item"
                border 
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div> -->
        <div class="pre-info">
          <div class="title">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">桥梁事故情况</div>
            </div>
            <el-select v-model="accident" size="small" placeholder="请选择" @change="accidentChange()"
              style="width: 200px;">
              <el-option v-for="item in accidentOptions" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <div class="bridge-accident">
            <div v-if="accidentData.length">
              <div class="bridge-accident-item" v-for="(item,index) in accidentData" :key="index">
                <div class="top-part">
                  <div class="name">{{ item.name }}</div>
                  <div class="value">{{ item.value }}</div>
                </div>
                <div class="bottom-part tie">
                  <el-progress :percentage="item.progress" color="#0051FF" :show-text="false"></el-progress>
                </div>
              </div>
            </div>
            <div class="no-data" v-else>暂无数据</div>
          </div>
        </div>
        <div class="qie-info">
          <div class="title">
            <div style="display: flex;">
              <div class="line"></div>
              <div class="name">辖区事故概况</div>
            </div>
            <el-select v-model="year" placeholder="请选择年份" size="small" @change="yearChange" style="width: 200px;">
              <el-option v-for="item in yearOptions" :key="item.year" :label="item.year" :value="item.year" />
            </el-select>
          </div>
          <div class="recently">
            <div class="recently-item">
              <div style="background-color: rgb(252, 252, 252);border-radius: 10px;
               border: 2px solid rgba(128, 128, 128, 0.08);margin-bottom: 9px;width: 158px;height: 93px;">
                <div class="name">事故总数</div>
                <div class="value">{{ accidentTotal }}</div>
              </div>
              <div style="background-color: rgb(252, 252, 252); border-radius: 10px; border: 2px solid rgba(128, 128, 128, 0.08);
               margin-bottom: 24px; width: 158px; height: 93px;">
                <div class="name1">最近事故时间</div>
                <div class="value1">{{ recentTime }}</div>
              </div>
            </div>
            <div id="first-chart" style="height: 200px;width: 50%;"></div>
          </div>
        </div>

      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="legend">
          <div class="legend-item">
            <img src="../../assets/images/big-screen/jg-budabiao.png" alt="">
            <div>净高不达标桥梁</div>
          </div>
          <div class="legend-item">
            <img src="../../assets/images/big-screen/jg-dabiao.png" alt="">
            <div>净高达标桥梁</div>
          </div>
          <div class="legend-item">
            <img src="../../assets/images/big-screen/hidden-trouble.png" alt="">
            <div>隐患桥梁</div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="area" @click="router.push({ path: '/zhongshanIndex' })">
          <div class="name">
            <img src="../../assets/images/pc/zsxxsfq-icon.png" alt="">
            <div>中山先行示范区</div>
          </div>
          <img src="../../assets/images/pc/more-icon.png" style="padding-right: 16px;">
        </div>
        <div style="background: #f7fbff; border-width: 2px; border-style: solid;border-color: #7db9e469;height: 480px;
    margin-bottom: 10px;width: 620px;">
          <div class="title">
            <div style="display: flex;margin-left: -15px;">
              <div class="line"></div>
              <div class="name">筛选</div>
            </div>

          </div>
          <div class="filter">
            <div class="filter-item">
              <div class="name">内河高等级航道</div>
              <el-checkbox-group v-model="checkedValues1" @change="() => { hiddenTrouble = false; handleChange(); }">
                <el-checkbox v-for="item in options1" :key="item" :label="item" :value="item" border>
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <div class="name">内河4-7等级航道</div>
              <el-checkbox-group v-model="checkedValues2" @change="() => { hiddenTrouble = false; handleChange(); }">
                <el-checkbox v-for="item in options2" :key="item" :label="item" :value="item" border>
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <div class="name">内河等外航道</div>
              <el-checkbox v-model="nhdwhd" @change="() => { hiddenTrouble = false; handleChange(); }" border>
                内河等外航道
              </el-checkbox>
            </div>
            <div class="filter-item">
              <div class="name">通航净高达标情况</div>
              <el-checkbox-group v-model="checkedValues3" @change="() => { hiddenTrouble = false; handleChange(); }">
                <el-checkbox v-for="item in options3" :key="item" :label="item" :value="item" border>
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <div class="name">事故桥梁</div>
              <el-checkbox-group v-model="checkedValues4" @change="() => { hiddenTrouble = false; handleChange(); }">
                <el-checkbox v-for="item in options4" :key="item" :label="item" :value="item" border>
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <div class="name">隐患桥梁</div>
              <el-checkbox v-model="hiddenTrouble" @change="hiddenTroubleFn()" border>
                隐患桥梁
              </el-checkbox>
            </div>
          </div>
        </div>
        <div style=" background: #f7fbff; border-width: 2px; border-style: solid;border-color: #7db9e469;height: 614px;margin-top: 11px;">
            <div class="title">
          <div style="display: flex;margin-left: -15px;">
            <div class="line"></div>
            <div class="name">隐患桥梁情况</div>
          </div>
        </div>
        <div class="hidden-trouble">
          <div class="bridge-accident">
            <div v-if="cityDivisionData.length">
              <div class="bridge-accident-item" v-for="(item,index) in cityDivisionData" :key="index">
                <div class="top-part">
                  <div class="name">{{ item.city }}</div>
                  <div class="value">{{ item.cityNumber }}</div>
                </div>
                <div class="bottom-part tie">
                  <el-progress :percentage="item.cityNumber" color="#0051FF" :show-text="false"></el-progress>
                </div>
              </div>
            </div>
            <div class="no-data" v-else>暂无数据</div>
          </div>
          <div id="second-chart" style="height: 210px;"></div>
        </div>
        </div>
      
        <!--<div class="title">
          <div class="name">辖区事故概况</div>
          <el-select
            v-model="year"
            placeholder="请选择年份"  
            size="small" 
            @change="yearChange"              
          >
            <el-option
              v-for="item in yearOptions"
              :key="item.year"
              :label="item.year"
              :value="item.year"
            />
          </el-select>
        </div>
        <div class="recently">  
          <div class="recently-item">
            <div style="margin-bottom: 24px;">
              <div class="name">事故总数</div>
              <div class="value">{{ accidentTotal }}</div>
            </div>
            <div>
              <div class="name">最近事故时间</div>
              <div class="value">{{ recentTime }}</div>
            </div>
          </div>        
          <div id="first-chart" style="height: 200px;width: 50%;"></div>
        </div>        
        <div class="title">
          <div class="name">事故列表</div>
        </div>
        <div class="table">
          <el-table :data="tableData" height="252">  
            <el-table-column label="事故桥梁" width="100">
                <template #default="scope">
                  <div 
                    @click="chooseBridge(scope.row)"
                    style="color: #0051FF;cursor: pointer;"
                  >
                    {{ scope.row.accidentBg }}
                  </div>
                </template>
              </el-table-column>       
            <el-table-column prop="accidentShip" label="事故船舶" width="90" />    
            <el-table-column prop="accidentHd" label="事故航道" width="100" />    
            <el-table-column prop="accidentLevel" label="事故等级" width="80" />    
            <el-table-column prop="happenDate" label="发生时间" width="100" />         
          </el-table>
        </div>
        <div class="title">
          <div class="name">{{ accidentBridge }}事故</div>
        </div>
        <div class="accident">
          <div class="radio-group">
            <el-radio-group v-model="radio">
              <el-radio-button label="事故简报" value="事故简报" />
              <el-radio-button label="现场视频" value="现场视频" />
              <el-radio-button label="新闻资讯" value="新闻资讯" />                                          
            </el-radio-group>
          </div>
          <div class="info" v-show="radio === '事故简报'">
            <div class="info" v-html="accidentInfo"></div>
          </div>
          <div class="video" v-show="radio === '现场视频'">
            <video 
              :src="videoUrl"
              autoplay
              controls
              muted
              width="424" 
              height="180"
            ></video>
          </div>
          <div class="new-list" v-show="radio === '新闻资讯'">
            <div 
              class="new-item"
              v-for="(item,index) in news" 
              :key="index"
              @click="handleGo(item.accidentNewsUrl)"
            >
              {{ item.accidentBg }}
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();

//引入Echarts
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent } from 'echarts/components';
import { PieChart, BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, TitleComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

//引入接口
import {
  getBgAndWy, //整体情况
  getCbll, //上月船舶流量
  rammedBridge, //桥梁事故情况
  getYearList, //事故案例情况获取年份
  acciSit, //事故案例情况详情
  acciInfo, //事故简报/新闻资讯
  acciVideo, //现场视频
  cityDivision, //隐患桥梁情况-地市划分
  regionDivision, //隐患桥梁情况-流域划分
} from "@/bridge-h5/utils/bridgeAreaControlApi";

//地图
import OlArc from "./olArcBridge.vue";
const OlArcRef = ref(null);

//整体情况
const bgAndWyData = ref({});
const getBgAndWyFn = () => {
  getBgAndWy().then((res) => {
    if (res.code === 200 && res.data) {
      bgAndWyData.value = res.data;
    }
  })
};
const getCbllData = ref({});
const getCbllFn = () => {
  getCbll().then((res) => {
    if (res.code === 200 && res.data) {
      getCbllData.value = res.data;
    }
  })
};

//筛选
const checkedValues1 = ref([]);
const options1 = ["一级", "二级", "三级"];
const checkedValues2 = ref([]);
const options2 = ["四级", "五级", "六级", "七级"];
const nhdwhd = ref(false);
const checkedValues3 = ref([]);
const options3 = ["达标", "不达标"];
const checkedValues4 = ref([]);
const options4 = ["近三年被撞桥梁", "近一年被撞桥梁"];
const hiddenTrouble = ref(false);
const hiddenTroubleFn = () => {
  if (hiddenTrouble.value) {
    checkedValues1.value = [];
    checkedValues2.value = [];
    nhdwhd.value = false;
    checkedValues3.value = [];
    checkedValues4.value = [];
  }
  handleChange();
};
const handleChange = () => {
  let arr = checkedValues1.value.concat(checkedValues2.value);
  let isDabiao = [];
  let isAccident = [];
  if (nhdwhd.value === true) {
    arr.push("八级");
  };
  checkedValues3.value.forEach((item) => {
    if (item == "达标") {
      isDabiao.push(0);
    } else if (item == "不达标") {
      isDabiao.push(1);
    }
  });
  checkedValues4.value.forEach((item) => {
    if (item == "近三年被撞桥梁") {
      isAccident.push(3);
    } else if (item == "近一年被撞桥梁") {
      isAccident.push(1);
    }
  });
  OlArcRef.value.getPosInfoFn(
    {
      level: arr.join(','),
      isDabiao: isDabiao.join(','),
      isAccident: isAccident.join(',')
    },
    hiddenTrouble.value,
  );
};

//桥梁事故情况
const accident = ref(3);
const accidentOptions = [
  { name: "近三年被撞桥梁", value: 3 },
  { name: "近一年被撞桥梁", value: 1 },
];
const accidentData = ref([]);
const rammedBridgeFn = () => {
  rammedBridge({
    isAccident: accident.value
  }).then((res) => {
    if (res.code === 200 && res.data.length) {
      accidentData.value = [];
      res.data.forEach((item) => {
        let obj = {
          name: item.bridgeName,
          value: item.times
        };
        if (item.times === 3) {
          obj.progress = 100;
        } else if (item.times === 2) {
          obj.progress = 66;
        } else if (item.times === 1) {
          obj.progress = 33;
        }
        accidentData.value.push(obj);
      });
    } else {
      accidentData.value = [];
    }
  });
};
const accidentChange = () => {
  rammedBridgeFn();
};

//事故案例情况
const year = ref("全部");
const yearOptions = ref([]);
const tableData = ref([]);
const accidentTotal = ref(0);
const recentTime = ref("");
const accidentBridge = ref("");
const radio = ref("事故简报");
const accidentInfo = ref('');
const news = ref([]);
const getYearListFn = () => {
  getYearList().then((res) => {
    if (res.code === 200) {
      res.data.unshift({ year: "全部" });
      yearOptions.value = res.data;
      acciSitFn();
    }
  });
};
const yearChange = () => {
  acciSitFn();
};
const acciSitFn = () => {
  acciSit({
    year: year.value === "全部" ? "" : year.value
  }).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data.accidentList;
      accidentTotal.value = res.data.accidentTotal;
      recentTime.value = res.data.recentTime;
      accidentBridge.value = res.data.accidentList[0].accidentBg;
      acciInfoFn();
      acciVideoFn();
      let accidentData = [];
      res.data.group.forEach((item, index) => {
        let obj = {
          name: item.accidentLevel,
          value: item.count,
        };
        accidentData.push(obj);
      });
      initFirstChart(accidentData);
    }
  });
};
const initFirstChart = (accidentData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById('first-chart'));
    let option = {
      title: {
        text: accidentTotal.value,
        subtext: "事故总数",
        textStyle: {
          color: "#262626",
          fontSize: 24,
          align: "center",
        },
        subtextStyle: {
          fontSize: 12,
          color: "#595959",
        },
        x: "center",
        y: "35%",
      },
      legend: {
        type: 'scroll',
        itemWidth: 8,
        itemHeight: 8,
      },
      tooltip: {
        trigger: 'item',
        confine: true, //限制在图表区域内   
      },
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: accidentData
        }
      ],
    };
    option && pieChart.setOption(option);
  });
};
const chooseBridge = (row) => {
  accidentBridge.value = row.accidentBg;
  setTimeout(() => {
    acciInfoFn();
    acciVideoFn();
  }, 500);
};
const acciInfoFn = () => {
  acciInfo({
    bridge: accidentBridge.value
  }).then((res) => {
    if (res.code === 200) {
      accidentInfo.value = res.data.accidentInfo;
      news.value = res.data.news;
    }
  });
};
const handleGo = (url) => {
  window.location.href = url;
};
const videoUrl = ref('');
const acciVideoFn = () => {
  acciVideo({
    bridge: accidentBridge.value
  }).then((res) => {
    if (res.code === 200 && res.data.length) {
      videoUrl.value = `${import.meta.env.VITE_APP_BASE_API}${res.data[0].url}`;
    } else {
      videoUrl.value = "";
    }
  });
};

//隐患桥梁情况
const cityDivisionData = ref([]);
const cityDivisionFn = () => {
  cityDivision().then((res) => {
    if (res.code === 200 && res.data.length) {
      cityDivisionData.value = res.data;
    }
  });
};
const regionDivisionFn = () => {
  regionDivision().then((res) => {
    if (res.code === 200) {
      let regionDivisionData = [];
      res.data.forEach((item, index) => {
        let obj = {
          name: item.region,
          value: item.regionNumber,
        };
        regionDivisionData.push(obj);
      });
      initSecondChart(regionDivisionData);
    }
  });
};
const initSecondChart = (regionDivisionData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById('second-chart'));
    let option = {
      legend: {
        itemHeight: 8,
        itemWidth:8,
      },
      tooltip: {
        trigger: 'item',
        confine: true, //限制在图表区域内   
      },
      grid: {
      top: "15%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          itemStyle: {
            // 定义每个饼图项的颜色
            normal: {
              color: function(params) {
                const colors = ['#0051FF', '#66D88A', '#8B44FF', '#0E8A89','#00FFFF']; // 自定义颜色数组
                return colors[params.dataIndex % colors.length]; // 根据索引循环颜色
              },
            },
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: regionDivisionData
        }
      ],
    };
    option && pieChart.setOption(option);

  });
};

onMounted(() => {
  document.title = "水上桥区管控";
  getBgAndWyFn();
  getCbllFn();
  rammedBridgeFn();
  getYearListFn();
  cityDivisionFn();
  regionDivisionFn();
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Din;
  src: url("../../assets/fonts/din.ttf");
}
@font-face {
  font-family: Tx;
  src: url("../../assets/fonts/tx.ttf");
}
.container {
  width: 1920px;
  height: 1080px;
  box-sizing: content-box;
  .header {
    height: 40px;
    width: 2500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
    border-radius: 57px;
    // background-color:#d0e7fe;
    background: linear-gradient(to right, #d0e7fe, #d0e7fe3b);
    margin: 16px 16px 0px 16px;
    padding: 0 16px;
    .title {
     // font-family: "Tx";
     font-weight: bold;
      font-weight: 1000 !important;
      font-size: 21px;
      color: rgba(105, 161, 247, 255);
    }
    .menu {
      display: flex;
      align-items: center;
      .item {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        padding: 6px 18px;
        border-radius: 4px;
      }
      .active {
        color: #ffffff;
        background: #0051ff;
      }
    }
  }
  .main {
    box-sizing: content-box;
    height: 1024px;
    margin: 16px;
    display: flex;
    .left-content {
      width: 620px;
      height: 1026px;
      background-color: #FFF;
      box-sizing: content-box;

      .count {
        height: 278px;
        box-sizing: content-box;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 4px;
        display: flex;
        margin-bottom: 10px;
        width: 620px;
        margin-right: 16px;
        background: #f7fbff;
        border-width: 2px;
        border-style: solid;
        border-color: #7db9e469;
        .left-part {
          padding: 0px 20px 0px 16px;
          margin: 16px 0;
          margin-left: 15px;
          border-right: 1px solid #f0f0f0;
          .item {
            .top {
              display: flex;
              align-items: center;
              img {
                width: 18px;
                height: 18px;
                padding-right: 4px;
              }
              .name {
                font-weight: bold;
                font-size: 16px;
                color: #595959;
                padding-right: 16px;
                margin-left: 31px;
              }
              .name1 {
                font-weight: bold;
                font-size: 16px;
                color: #595959;
                padding-right: 16px;
                margin-left: 31px;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 23px;
                color: #262626;
                margin-left: -9px;
              }
            }
            .bottom {
              display: flex;
              justify-content: space-between;
              margin: 13px 55px 16px 0px;
              .bottom-item {
                .name {
                  font-weight: bold;
                  font-size: 14px;
                  color: #595959;
                  margin-left: 33px;
                }
                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 21px;
                  color: #262626;
                  margin-left: 33px;
                  margin-top: 8px;
                  position: absolute;
                }
              }
            }
          }
        }
        .right-part {
          height: 222px;
          width: 281px;   
           margin-left: -3px; 
          margin-top: 22px;
          background-color: #fcfcfc;
          border-radius: 10px;
          border: 2px solid #80808014;
          .top {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            img {
              width: 18px;
              height: 18px;
              padding-right: 4px;
            }
            .name {
              font-weight: bold;
              font-size: 16px;
              color: #595959;
              padding-right: 16px;
              margin-left: 30px;
              margin-top: 0px;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 23px;
              color: #000000;
              margin-top: 0px;
              margin-left: 48px;
            }
          }
          .bottom {
            display: flex;
            align-items: center;
            margin-bottom: 29px;
            .name {
              font-weight: bold;
              font-size: 14px;
              color: #595959;
              padding-right: 16px;
              margin-left: 30px;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 21px;
              color: #000000;
              margin-left: 191px;
              position: absolute;
            }
            .value1 {
              font-family: "Din";
              font-weight: bold;
              font-size: 21px;
              color: #000000;
              margin-left: 192px;
              position: absolute;
            }
          }
        }
      }
      .pre-info {
        width: 620px;
        height: 500px;
        margin-right: 16px;
        bottom: 10px;
        background: #f7fbff;
        border-width: 2px;
        border-style: solid;
        border-color: #7db9e469;
        .title {
          height: 48px;
          // background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          border-color: #7db9e469;
          background-color: #f6fcfc;
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-weight: 500;
            color: #3f91f0;
            font-size: 17px;
            font-weight: bold;
            margin-left: -14px;
            white-space: nowrap;
          }
          .line {
            width: 4px;
            height: 20px;
            background-color: #318bf2;
            margin-right: 18px;
          }
        }
      }
      .qie-info {
        width: 620px;
        height:362px;
        margin-right: 16px;
        margin-top: 10px;
        background: #f7fbff;
        border-width: 2px;
        border-style: solid;
        border-color: #7db9e469;
        .title {
          height: 48px;
          // background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          padding: 0 16px;
          background-color: #f6fcfc;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-weight: 500;
            color: #3f91f0;
            font-size: 17px;
            font-weight: bold;
            margin-left: -14px;
            white-space: nowrap;
          }
          .line {
            width: 4px;
            height: 20px;
            background-color: #318bf2;
            margin-right: 18px;
          }
        }
      }
      .filter {
        height: 336px;
        box-sizing: content-box;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        margin-bottom: 16px;
        .filter-item {
          margin: 0px 16px;
          padding: 6px 0;
          .line {
            width: 4px;
            height: 20px;
            background-color: #318bf2;
            margin-right: 18px;
          }
          .name {
            font-weight: 400;
            font-size: 12px;
            color: #595959;
            margin-bottom: 4px;
          }
        }
      }
      .bridge-accident {
        // height: 336px;
        height: 449px;
        width: 463;
        overflow: auto;
        // background: #FFFFFF;
        // border-color: #7db9e469;
        background-color: #f6fcfc;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        margin-bottom: 16px;
        .bridge-accident-item {
          margin: 16px;
          .top-part {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            .name {
              font-weight: 400;
              font-size: 14px;
              color: #595959;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 18px;
              color: #0051ff;
            }
          }
        }
        .no-data {
          display: flex;
          justify-content: center;
          line-height: 278px;
          color: #595959;
          font-size: 18px;
          font-weight: bold;
        }
      }
      .recently {
        height: 314px;
        // background: #FFFFFF;
        background-color: #f6fcfc;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        .recently-item {
          width: 50%;
          padding-left: 50px;
          .name {
            font-size: 16px;
            font-weight: bold;
            color: #595959;
            padding-bottom: 10px;
            margin-left: 42px;
            margin-top: 13px;
          }
          .name1 {
            font-size: 16px;
            font-weight: bold;
            color: #595959;
            padding-bottom: 10px;
            margin-left: 31px;
            margin-top: 6px;
          }
          .value {
            font-family: "Din";
            font-weight: bold;
            font-size: 27px;
            color: #262626;
            margin-left: 53px;
          }
          .value1 {
            font-family: "Din";
            font-weight: bold;
            font-size: 20px;
            color: #262626;
            margin-left: 31px;
          }
        }
      }
    }
    .middle-content {
      width: 928px;
      height: 992px;
      margin: 0 16px;
      box-sizing: content-box;
      position: relative;
      .legend {
        width: 196px;
        height: 126px;
        background: rgba(5, 48, 68, 0.8);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(120, 223, 255, 0.4);
        position: absolute;
        top: 16px;
        right: 16px;
        .legend-item {
          display: flex;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          margin: 16px 0px 16px 16px;
          img {
            width: 20px;
            height: 20px;
            padding-right: 4px;
          }
        }
      }
    }
    .right-content {
      width: 620px;
      height: 992px;
      margin-left: 331px;
      background-color: #FFF;
      box-sizing: content-box;
      .area {
        height: 44px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 4px;
        line-height: 44px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 18px;
          color: #262626;
          img {
            width: 20px;
            height: 20px;
            padding: 0px 8px 0px 16px;
          }
        }
      }
      .title {
        height: 48px;
        // background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
        background: #f7fbff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        color: #3f91f0;
        font-size: 17px;
        font-weight: bold;
        white-space: nowrap;
        .name {
          margin-left: 7px;
        }
      }
      .line {
        width: 4px;
        height: 20px;
        background-color: #318bf2;
        margin-left: 27px;
      }
      .recently {
        height: 252px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        .recently-item {
          width: 50%;
          padding-left: 50px;
          .name {
            font-weight: 400;
            font-size: 12px;
            color: #262626;
            padding-bottom: 4px;
          }
          .value {
            font-family: "Din";
            font-weight: bold;
            font-size: 24px;
            color: #262626;
          }
        }
      }
      .table {
        height: 252px;
        margin-bottom: 16px;
      }
      .accident {
        height: 252px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        .radio-group {
          text-align: center;
          padding: 16px 0;
        }
        .info {
          height: 180px;
          overflow-y: auto;
          margin: 0 8px 0 16px;
        }
        .video {
          text-align: center;
        }
        .new-list {
          height: 180px;
          overflow-y: auto;
          margin: 0 16px;
          .new-item {
            font-weight: 500;
            font-size: 14px;
            color: #0051ff;
            padding: 16px 0;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
          }
        }
      }
      .filter {
        height: 431px;
        box-sizing: content-box;
        // background: #FFFFFF;
        background: #f7fbff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        margin-bottom: 16px;
        .filter-item {
          margin: 0px 16px;
          padding: 6px 0;
          .name {
            font-weight: 400;
            font-size: 12px;
            color: #595959;
            margin-bottom: 4px;
          }
        }
      }
      .hidden-trouble {
        height: 565px;
        // background: #FFFFFF;
        background: #f7fbff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 0px 0px 4px 4px;
        .bridge-accident {
          height: 318px;
          overflow: auto;
          // background: #FFFFFF;
          background: #f7fbff;
          box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
          border-radius: 0px 0px 4px 4px;
          margin-bottom: 16px;
          .bridge-accident-item {
            margin: 16px;
            .top-part {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              .name {
                font-weight: 400;
                font-size: 14px;
                color: #595959;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 18px;
                color: #0051ff;
              }
            }
          }
          .no-data {
            display: flex;
            justify-content: center;
            line-height: 278px;
            color: #595959;
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>